import { createApp } from 'vue'
import router from '@/router'
import store from '@/store'

import { globalPlugin } from '@/utils/plugins'
import customComponents from '@/components'
// import { ElMessage } from 'element-plus'
// import 'element-plus/theme-chalk/el-message.css'

// import { Ls } from '@/utils/common'
import 'animate.css'
import '@/styles/index.scss'

import App from './App.vue'

// 2.0 中可以通过给Vue的原型上添加各种属性和方法, 这样就可以在组件中通过this来访问
// 因为 在2.0中, 所有的组件都直接是Vue的子类实例, 可以通过原型链来访问
// Vue.prototype.$message = () => {
//   console.log('hhh')
// }

const app = createApp(App)

// 3.0中, 通过下面的配置为应用内所有组件实例需要访问的全局属性
// app.config.globalProperties.$message = ElMessage
// app.config.globalProperties.$ls = Ls

// 建立组件与store和router的联系 this.$router this.$store
app.use(store)
app.use(router)

// app1.config.globalProperties.$x = 1
// app2.config.globalProperties.$x = 1
// const plugin = {
//   install (vm, options) {
//     vm.config.globalProperties.$x = options.step * 2
//   }
// }
// app1.use(plugin)
// app2.use(plugin)
app.use(globalPlugin)
// 将自定义的组件进行全局注册
app.use(customComponents)


app.mount('#app')